<template>
	<view class="component" :style="{height:height +'px'}">
		<view class="icon" v-if="props.showIcon" :style="{top:textTop,height:textHeight}" @click="uni.navigateBack()">
			<u-icon name="arrow-left" size="20" color="#1F242B"></u-icon>
		</view>
		<view class="title" :style="{height:textHeight,top:textTop+'px',lineHeight:textHeight +'px',color:titleColor}">
			{{props.title}}
		</view>
	</view>
</template>

<script setup lang="uts">
	import { ref } from 'vue';
	const props = withDefaults(defineProps<{
		// 头部名称
		title ?: string,
		// 是否显示icon
		showIcon ?: boolean,
		// title字体颜色
		titleColor ?: string
	}>(), { showIcon: true })
	
	const emit = defineEmits<{
	  (e: "height", value: string): void;
	
	}>();
	const height = ref<number>(0)
	const textTop = ref<number>(0)
	const textHeight = ref<number>(0)

	const menu = uni.getMenuButtonBoundingClientRect()
	height.value = menu.top + menu.height + 2
	textHeight.value = menu.height
	textTop.value = menu.top
	emit('height',height.value + 'px')
</script>

<style lang="scss" scoped>
	.component {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 99;

		.title {
			position: absolute;
			justify-content: center;
			box-sizing: border-box;
			width: 100%;
			text-align: center;
			color: #1F242B;
		}

		.icon {
			position: absolute;
			display: flex;
			align-items: center;
			left: 20rpx;
		}
	}
</style>